@import "~styles/variables.scss";
@import "~styles/mixin.scss";

.customer-card--body{
	background: $bgColor;
	.customer-card--title{
		padding: 1rem;
		background-color: white;
		.customer-card--info{
			display: flex;
			justify-content: space-between;
			div{
				text-align: center;
				@include boxShadow(8px);
				margin-top: 0.667rem;
				width: 11.0rem;
				padding: 1.2rem;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				height: 5.8rem;
				span{
					color: $ColorHighLight;
					font-size: $fontSizeLittle;
					&.number-type{
						font-size: $fontSizeHuge;
						color: $lightBlue;
					}
				}
			}
			.inline-block{
				font-size: $fontSizeBigger;
			}
			.text-center{
				font-size: $fontSizeLittle;
				color: $ColorLight;
			}
		}
		.customer-card--name{
			@include boxShadow(8px)
			width: 100%;
			padding: 1rem;
			box-sizing: border-box;
			height: 4rem;
			display: flex;
			font-size: $fontSizeLittle;
			line-height: 2.667rem;
			justify-content: space-between;
			.customer-info{
				img,div{
					display: inline-block;
					font-size: $fontSizeBigger;
				}
			}
			img{
				width: 2.667rem;
				height: 2.667rem;
				border-radius: 50%;
				margin-right: 0.667rem;
			}
			i{
				line-height: 2.667rem;
				font-size: $fontSizeHuge;
				color: $ColorLight;
			}
		}
	}
	.customer-tags{
		margin: 0.667rem 0;
		width: 100%;
		height: 9.333rem;
		padding: 1.0rem 0.667rem;
		background-color: white;
		.customer-tag--title{
			font-size: $fontSizeBigger;
			font-weight: bold;
			margin-bottom: 1.0rem;
		}
		.customer-tag{
			overflow: hidden;
			div{
				float: left;
				line-height: 2.667rem;
				color: #be9b7c;
				padding: 0 1.333rem;
				background:rgba(190,155,124,0.2);
				border-radius: 1.0rem;
				+ div{
					margin-left: 0.667rem;
				}
			}
		}
	}
	.switch-tap{
		margin:0.667rem 0;
		.active{
			border-bottom: 2px solid $majorBlue;
		}
	}
}